<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">
      <div class="btns f-r">
        <button type="button" class="btn btn-info" @click="toggleAddModal">新增</button>
        <button type="button" class="btn btn-warning" @click="toggleUpdateModal">修改</button>
        <button type="button" class="btn btn-danger" @click="deleteFn">删除</button>
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in tableRow.data"
            @click="selectRow(trs,index)"
            :class="{active: index === isActive}"
          >
            <td v-for="tds in tableHeader" :title="trs[tds.key]">
              {{ trs[tds.key] }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!--表格组 end-->
    <!--新增-->
    <AddPositionManage
      :add-modal-obj="AddModalObj"
      @addModalClose="toggleAddModal"
    ></AddPositionManage>

    <!--修改-->
    <UpdatePositionManage
      :UpdateModalObj="UpdateModalObj"
      :UpdateData="UpdateData"
      @UpdateModalClose="toggleUpdateModal"
    ></UpdatePositionManage>

  </div>
</template>

<script>
  import AddPositionManage from "./AddPositionManage"
  import UpdatePositionManage from "./UpdatePositionManage"
  export default {
    name: "positionManage",
    data(){
      return{
        isActive: -1,
        tableRow:[],
        tableHeader:[
          {"key":"position","value":"职位"},
          {"key":"sort","value":"排序"},
        ],
        AddModalObj:{
          isShow: false
        },
        UpdateModalObj: {
          isShow: false
        },
        UpdateData:{
          id: '',
          position: '',
          sort: null
        }
      }
    },
    components:{
      AddPositionManage,
      UpdatePositionManage
    },
    created(){
      this.tableRowAjax();
    },
    methods:{
      //加载表格
      tableRowAjax(){
        this.$axios.get(baseURL+"api/jp-HCZZ-AdminWeb-app-ms/policeposition/duty/findallposition").then( res=> {
          this.tableRow = res
        })
        this.isActive = -1;
      },
      //选择行
      selectRow(obj,index){
        //console.log(obj);
        this.isActive = index;
        this.UpdateData = {
          id: obj.id,
          position: obj.position,
          sort: obj.sort
        }
      },
      //新增弹窗显示与隐藏
      toggleAddModal(){
        this.AddModalObj.isShow = !this.AddModalObj.isShow;
        if( this.AddModalObj.isShow === false ){
          //重新加载表格
          this.tableRowAjax();
        }
      },
      //修改弹窗显示与隐藏
      toggleUpdateModal(){
        //console.log(this.UpdateData);
        if(this.UpdateData.id != ''){
          this.UpdateModalObj.isShow = !this.UpdateModalObj.isShow;
        }else {
          this.s_alert("请选择需要修改的职位！");
          // alert("请选择需要修改的职位！");
        }
        if(this.UpdateModalObj.isShow === false){
          //重新加载表格
          this.tableRowAjax();
        }
      },
      //删除
      deleteFn(){
        if(this.UpdateData.id != ''){
          let msg = confirm("请问是否删除该职位？");
          if(msg){
            this.$axios.delete(baseURL+"api/jp-HCZZ-AdminWeb-app-ms/policeposition/duty/delete?id="+this.UpdateData.id)
              .then( res => {
                //console.log(res);
                this.s_alert("删除成功！");
                // alert("删除成功！");
                this.tableRowAjax();
            })
              .catch(res => {
              this.s_alert("删除失败！");
              // alert("删除失败！");
              //console.log(res);
            })
          }
        } else {
          this.s_alert("请选择需要删除的职位！");
        }
      }
    },// end methods
  }
</script>

<style scoped>

</style>
